<template>
  <div class="followFriends">
    <!-- 好友列表 -->
    <div class="dress_load" v-if="dressloadShow">
      <!-- <van-loading color="#1989fa" size="80" :vertical="true" class="dress_load_load" /> -->
    </div>
    <div class="followFriends" v-else>
      <HeaderComponent title="好友列表" background='#ffffff' color='#000000' image_='0' size='4.8vw' />
      <div class="list_box" :style="{paddingTop:height +'px'}" v-if="goods_friends.length">
        <div v-for="item,index in goods_friends" :key="index" class="list_center" @click="todress_new(item)">
          <div class="img_header">
            <img :src="item.head_pic" alt="">
            <div class="center_alt">
              <div><span>{{item.nickname}}</span><img :src="require('@/assets/images/dressUpExchange/grilx.png')" alt=""></div>
              <span>ID:{{item.perfect_number}}</span>
            </div>
          </div>
          <div><img :src="require('@/assets/images/dressUpExchange/jinru.png')" alt=""></div>
        </div>
      </div>
      <div v-else class="nofirend">
        你还没有好友
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, inject } from 'vue'
import { useRouter } from 'vue-router'
import { messageFriend } from '@/api/user'
import MessageBoxFun from '@/components/message_box/MessageBox'
import HeaderComponent from '@/components/header_component/HeaderComponent.vue'
export default defineComponent({
    components: {
        HeaderComponent
    },
    setup () {
        const height = inject<number>('getHeight')
        const router: any = useRouter()
        const dressloadShow = ref<boolean>(false)
        const goods_friends = ref<Array<any>>([])
        const get_friend = async ():Promise<void> => {
            const dataRes = await messageFriend({})
            if (dataRes.data.status === 0) {
                dressloadShow.value = false
                goods_friends.value = dataRes.data.result
            } else {
                MessageBoxFun({
                    message: dataRes.data.text,
                    delay: 1500
                })
            }
           
        }
        const todress_new = (item: Record<string, any>):void => {
            const arr = JSON.stringify(item)
            router.replace({
                path: "dress_new",
                query: {
                    friends_: encodeURIComponent(arr)
                },
            });
        }
        get_friend()
        return {
            todress_new,
            goods_friends,
            dressloadShow,
            height
        }
    }
})
</script>

<style lang="less" scoped>
@import './FollowFriends.less';
</style>